<template>
  <div>
    <div class="invoice" @click="showInvoice = true">
      <span>发票</span>
      <span class="type" v-if="invoicename">
        <em class="font">{{ invoicename }}</em>（{{ companyname }}—{{ invoice_list.call }}）
      </span>
      <i class="fa fa-angle-right"></i>
    </div>

    <van-popup v-model="showInvoice" position="bottom" :style="{ height: '80%' }" class="pc_popup">
      <div class="popup_box">
        <h1>发票<i class="iconfont icon-close11" @click="showInvoice = false"></i></h1>
        <p>
          <i class="iconfont icon-tishi1"></i>
          <span>发票须知：启用电子普通发票，订单完成后24小时内开具，点击“我的订单“可查看和下载</span>
        </p>
        <div class="type_box">
          <h2>发票类型</h2>
          <div class="type">
            <button :class="{ cur: invoice_list.invoice_type === 'electron' }" v-if="invoiceData.electron_status" @click="changeInvoiceType('electron')">电子发票</button>
            <button :class="{ cur: invoice_list.invoice_type === 'papery' }" v-if="invoiceData.papery_status" @click="changeInvoiceType('papery')">纸质发票</button>
          </div>
        </div>
        <div class="type_box">
          <h2>发票抬头</h2>
          <div class="type">
            <button type="button" :class="{ cur: invoice_list.invoice_status === 'person' }" @click="invoice_title('person')">
              个人
            </button>
            <button type="button" :class="{ cur: invoice_list.invoice_status === 'company' }" @click="invoice_title('company')">
              单位
            </button>
          </div>
          <div class="input_box" v-if="invoice_list.invoice_status === 'person'">
            <van-field placeholder="请输入发票抬头" v-model="invoice_list.call" class="inp-info" :border="false" />
            <van-field placeholder="请输入邮箱（非必填）" v-model="invoice_list.email" class="inp-info" :border="false" />
          </div>
          <div class="input_box" v-if="invoice_list.invoice_status === 'company'">
            <van-field placeholder="请填写单位名称" v-model="invoice_list.call" class="inp-info" :border="false" />
            <van-field placeholder="请添加纳税人识别号" v-model="invoice_list.company_number" class="inp-info" :border="false" />
            <van-field placeholder="请输入邮箱（非必填）" v-model="invoice_list.email" class="inp-info" :border="false" />
          </div>
        </div>
        <div class="btn">
          <button type="button" @click="subInvoice">确定</button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    invoiceData: {
      type: Object,
      default: ()=> {
        return {};
      }
    },
  },
  data() {
    return {
      showInvoice: false,
      invoicename: '',
      companyname: '',

      invoice_list: {
        call: "",
        company_number: "",
        email: "",
        invoice_type: 'electron',
        invoice_status: 'person',
      }
    };
  },
  methods: {
    changeInvoiceType(str) {
      this.invoice_list.invoice_type = str;
    },

    invoice_title(str) {
      this.invoice_list.invoice_status = str;
      // 清空填写
      this.invoice_list.call = "";
      this.invoice_list.company_number = "";
      this.invoice_list.email = "";

      this.$emit('subInvoice', this.invoice_list);
    },
    subInvoice() {
      if (this.fun.isTextEmpty(this.invoice_list.call)) {
        this.$dialog.alert({ message: "请填写抬头" });
        return;
      }
      if (this.invoice_list.invoice_status == 'company' && this.fun.isTextEmpty(this.invoice_list.company_number)) {
        this.$dialog.alert({ message: "请添加纳税人识别号" });
        return;
      }
      // 页面回显
      this.invoicename = this.invoice_list.invoice_type === 'electron' ? "电子" : "纸质";
      this.companyname = this.invoice_list.invoice_status === 'person' ? "个人" : "单位";

      this.$emit('subInvoice', this.invoice_list);
      this.showInvoice = false;
    },
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .invoice {
    background: #fff;
    margin-top: 0.625rem;
    height: 2.8125rem;
    line-height: 2.8125rem;
    font-size: 15px;
    display: flex;
    padding: 0 0.875rem;
    border-top: solid 0.0625rem #ebebeb;
    border-bottom: solid 0.0625rem #ebebeb;
    position: relative;

    span {
      margin-right: 1.25rem;

      .font {
        color: #f15353;
      }
    }

    .type {
      font-size: 12px;
      color: #8c8c8c;
    }

    i {
      position: absolute;
      right: 0.875rem;
      font-size: 24px;
      color: #c9c9c9;
      line-height: 2.8125rem;
    }
  }

  .popup_box {
    background: #fff;
    min-height: 33.375rem;
    padding-top: 3.125rem;
    padding-bottom: 4.375rem;

    h1 {
      width: 100%;
      position: fixed;
      top: 0;
      background: #fff;
      font-size: 18px;
      height: 3.125rem;
      line-height: 3.125rem;
      display: flex;
      justify-content: space-between;
      padding: 0 0.875rem;

      i {
        font-size: 1rem;
        color: #c9c9c9;
      }
    }

    p {
      padding: 0.375rem 0.875rem;
      background: rgb(240, 249, 255);
      border-top: solid 0.0625rem #91d5ff;
      border-bottom: solid 0.0625rem #91d5ff;
      font-size: 14px;
      text-align: left;
      color: #8c8c8c;
      display: flex;

      i {
        font-size: 1.125rem;
        color: #91d5ff;
        margin-right: 0.25rem;
      }
    }

    .type_box {
      margin-top: 0.625rem;

      h2 {
        font-size: 15px;
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: left;
        padding: 0 0.875rem;
      }

      .type {
        display: flex;
        padding: 0 0.875rem;

        button {
          background: #fff;
          border: solid 0.0625rem #ebebeb;
          font-size: 0.875rem;
          width: 6rem;
          height: 1.75rem;
          border-radius: 1rem;
          margin-right: 1.25rem;
          color: #666;
        }

        .cur {
          background: #f15353;
          color: #fff;
          border: none;
        }
      }

      .input_box {
        margin-top: 1.25rem;
        padding: 0 0.875rem;

        ::v-deep input {
          padding: 0 0.625rem;
          width: 100%;
          height: 2.25rem;
          background: #f5f5f5;
          border-radius: 1rem;
          margin-bottom: 0.75rem;
        }
      }
    }

    .btn {
      position: fixed;
      bottom: 0;
      width: 100%;
      padding: 0.625rem 0.875rem;
      background: #fff;

      button {
        width: 100%;
        height: 2.625rem;
        border-radius: 2rem;
        background: #f15353;
        color: #fff;
        font-size: 18px;
        border: none;
      }
    }
  }

  .inp-info {
    padding: 0;

    ::v-deep input {
      padding: 0 0.625rem;
      width: 100%;
      height: 2.25rem;
      background: #f5f5f5;
      border-radius: 1rem;
      color: #333;
    }

    ::v-deep input::placeholder {
      color: #555;
    }
  }
</style>